<extend name="Base/common"/>

<block name="body">

<style type="text/css">
	.StudyHead div.f-fl p{font-size: 28px;margin-top: 19px;color:#999999;height: 40px;line-height:40px;}
	.StudyHead div.f-fl h1 {font-size: 30px;color:#333333;}
	.StudyHead div.f-fl {margin: 20px 0 0 20px;}
	.StudyHead div.f-fl p img {
    margin: 0px 10px -1px 0px;
	}
	.StudyHead div.f-fl h1 span {
	color:#ffad30;
    font-size: 25px;
}

	.StudyHead {
   
    margin:0;
}
.newheader{height:20px;width:100%;background:#faf8f8;border-bottom:1px solid #EFEEEE;}
.newbox{margin:0 20px;}
.StudyHead a.f-fl {
    margin: 20px 0 0 0;
}
#myClass-Study p.Head {
    padding: 20px 0;
	border-bottom:1px solid #EFEEEE;
}
#myClass-Study .listMOr li {
    margin: 0;
    width: 100%;
    border: 0;
    font-size: 28px;
    border-bottom: 1px solid #EFEEEE;
    padding: 20px 0;
    float: right;
    margin: 0;
}

#myClass-Study .newli a {
    padding: 0px 15px 2px;
    background: #ffa721;
    color: #fff;
    font-size: 20px;
    border-radius: 3px;
}

#myClass-Study .newli a.Bac {
    background: #1dce79;
    position: relative;
    color: #fff;
    font-size: 20px;
    border-radius: 3px;
}

#myClass-Study .newli div.over a {
    text-align: center;
    height: 46px;
    line-height: 46px;
    padding: 0;
    display: inline-block;
	width: 30%;
	margin:0 5% 20px 0%;
	float:left;
}


#myClass-Study .newli .Head{
	margin:20px 0;
	border:none;
}

#myClass-Study .newli a.Bac img.pos {
    position: absolute;
    top: -5px;
    right: -5px;
}

.StudyHead div.f-fl img.posi {
    right: -60px;
}

#myClass-Study .newli a.Add {
    background: #faf8f8;
    color: #999;
    font-size: 20px;
}

#myClass-Study .newli a.NoAc {
    background: #ffa721;
}

#myClass-Study .listMOr li a {
    padding: 5px 25px;
}
.form-horizontal .reply, .class-button, .ajax-post{margin-right:0;}

.renzheng{    
	position: relative;
    margin-top: 20px;
    height: 152px;}
.renzheng h1{
color: #ffad30;
    font-size: 28px;
}	

.renzheng img{position: absolute;
    right: 0;
    bottom: 10px;
	}
    </style>

        <!--首页-->

        <div id="myClass-Study">

            <header><a href="{:U('Mycourse/course')}" class="back"><img src="__IMG__/images/back_03.png"/></a>要学的</header>

                <div class="IndexList">
					<div class="newheader"></div>
					<div class="newbox">
                        <div class="StudyHead">

                            <div class="per">

                                <a href="#" class="f-fl"><img src="__ROOT__{$data.logo|getimg=###}"/></a>

                                <div class="f-fl" style="width:auto;">

                                    <h1>{$data.nickname}<if condition="$data['sex'] eq 1 "><img src="__IMG__/images/nan_03.png"/><else /><img src="__IMG__/images/girl_03.png"/></if></h1>

                                    <p><img src="__IMG__/images/idxe_24.jpg"/> 授课: {$data.title}</p>

                                    <p><img src="__IMG__/images/idxe_27.jpg"/>地址: {$data.area_id|getParentArea=###}{$data.area_id|getArea=###}</p>

                                    

                                </div>
								<div class="f-fr renzheng" >
									<h1>{$data.salary}元/小时</h1>
									<eq name="data.passed" value="1">
									<img src="__IMG__/images/idxe_21.jpg"/ class="posi">
									</eq>
								</div>
                                <div class="clear"></div>

                            </div>

                        </div>

                    <p class="Head" style="border-bottom:none;">课程安排</p>

                    <ul class="listMOr listlinone">

                        <eq name="class_ok" value="true">

                        <li>

                            <span class="f-fl">下次上课</span>

                            <span class="f-fr"><empty name="nextTime.class_date">暂无<else />{$nextTime.class_date|date='Y-m-d H:i:s',###}</empty></span>

                            <div class="clear"></div>

                        </li>

                        <li>

                            <span class="f-fl">课时</span>

                            <span class="f-fr">{$num}</span>

                            <div class="clear"></div>

                        </li>

                        <notempty name="class_ok">

                        <neq name="quanren" value="0">

                        <li>

                            <span class="f-fl">是否完成课程</span>

                                 <span class="f-fr class-btn-tow"><a href="###">确认</a></span>

                            <div class="clear"></div>

                        </li>

                        </neq>

                        <li>

                            <span class="f-fl">三天内自动确认</span>

                            <gt name="h" value="0"><span class="f-fr">倒计时:{$d}天{$h}小时</span><else/>



                            <span class="f-fr">待上课</span>



                            </gt>

                            <div class="clear"></div>

                        </li>

                        </notempty>

                        <notempty name="class_ok">

                        <li>

                            <p>如老师未按时上课，请及时通知老师修改上课时间。若未修改，请及时退订，以免造成损失。</p>

                            <if condition="$data.cancel neq '2'">

                            <input type="hidden" id="acid" name="cid" value="{$data.id}">

                            <span class="f-fr"><a href="###" class="class-button">退订</a></span>

                            <input type="hidden" id="auid" value="{$data.uid}">

                            <else />

                            <a href="###" class="f-fr class-chexiao">撤销</a>

                            </if>

                            <div class="clear"></div>

                        </li>
					                        </notempty>												<notempty name="class_no">
                        <li class="Li_f-fr2">

                            <input type="hidden" name="order" value="{$order}">

                            <span class="assess f-fr2"><a href="javascript:;">评论</a></span>

                            <input type="hidden" name="cid" value="{$data.id}">

                        </li>
						</notempty>
					</ul>
                        <div class="newli">

                            <p class="Head">我的课程</p>

                            <div class="over">



                        <volist name='time' id='vol' mod='3'>

                           <lt name="vol.class_date" value="$date">

                               <neq name="vol.class_date" value="0">

                                   <eq name="vol.at_class" value="1">

                                       <!-- <a href="###" class="Bac" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>{$vol.class_date|date='Y-m-d',###}　{$vol.num}次<img src="__IMG__/images/studyImg_03.png"  class="pos"/></a> -->
									   <!-- lkl修改，去掉次数 -->
                                       <a href="###" class="Bac" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>{$vol.class_date|date='Y-m-d H:i:s',###}<img src="__IMG__/images/studyImg_03.png"  class="pos"/></a>

                                   <else/>

                                       <!-- <a href="###" class="Bac div-span class-span" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>{$vol.class_date|date='Y-m-d',###}　{$vol.num}次</a> -->
									   <!-- lkl修改，去掉次数 -->
                                       <a href="###" class="Bac div-span class-span" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>{$vol.class_date|date='Y-m-d H:i:s',###}</a>

                                       <input style="display: none;" class="div-span class-span-disan" type="checkbox" name="check" value="{$vol.id}">

                                       <input type="hidden" value="{$vol.id}">

                                   </eq>

                               </neq>

                           </lt>

                            <gt name="vol.class_date" value="$date">

								  <eq name="data.cancel" value="0">

									<!-- <a href="###" class="Bac NoAc div-span" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>{$vol.class_date|date='Y-m-d',###}　{$vol.num}次</a> -->
									<!-- lkl修改，去掉次数 -->
									<a href="###" class="Bac NoAc div-span" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>{$vol.class_date|date='Y-m-d H:i:s',###}</a>

									<input type="hidden" value="{$vol.id}">
								  </eq>								  								  <eq name="data.cancel" value="2">									<!-- <a href="###" class="Bac NoAc btn-date" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>退订中{$vol.num}次</a> -->									<!-- lkl修改，去掉次数 -->									<a href="###" class="Bac NoAc btn-date" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>退订中</a>
								  </eq>							   									<eq name="data.cancel" value="1">										<a href="###" class="Add" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>已退订</a>									</eq>
                            </gt>

                            <eq  name="vol.class_date" value="0">

                               <eq name="data.cancel" value="0">

                                <!-- <a href="###" class="Add btn-date" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>未定{$vol.num}次</a> -->
								<!-- lkl修改，去掉次数 -->
                                <a href="###" class="Add btn-date" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>未定</a>

                                <input type="hidden" value="{$vol.id}">

                               </eq>

                                <eq name="data.cancel" value="2">

                                <!-- <a href="###" class="Bac NoAc btn-date" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>退订中{$vol.num}次</a> -->
								<!-- lkl修改，去掉次数 -->
                                <a href="###" class="Bac NoAc btn-date" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>退订中</a>

                               </eq>							   							   							    <eq name="data.cancel" value="1">                                <!-- <a href="###" class="Bac NoAc btn-date" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>退订中{$vol.num}次</a> -->								<!-- lkl修改，去掉次数 -->                                <a href="###" class="Add" style='<eq name="mod" value="2">margin:0 0 20px 0;</eq>'>已退订</a>                               </eq>

                            </eq>

                        </volist>

                               <!--  <a href="###" class="Bac">2016-10-15  1次 <img src="__IMG__/images/studyImg_03.png"  class="pos"/></a>

                               <a href="###" class="Bac NoAc">2016-10-15  1次</a> -->

                            </div>

                            <div class="clear"></div>

                        </div>

                    

                </div>
            </div>

        </div>

        <script type="text/javascript">

        //点击切换状态

        $('.class-span').toggle(function (){

            //$ (this).css ('background-color', 'red');

            $ (this).next('input[name=check]').attr("checked", true);

        }, function (){

            $ (this).css ('background-color', '#1DCE79');

            $ (this).next("[name = check]:checkbox").attr("checked", false);

        });

        //撤销

        $('.class-chexiao').on('click',function(){

           var order =  {:I('get.order')};

            layer.open({

                    content: '您确定要撤销吗？'

                    ,btn: ['确定', '取消']

                    ,yes: function(index){

                      $.ajax({

                            url: "{:U('Course/ontOrder')}",

                            type: 'GET',

                            dataType: 'json',

                            data: {order:order,},

                            success:function(data){

								layer.msg('撤销成功', {

									  time: 2000, //20s后自动关闭

									},function(){                                    location.reload();                             });                            }                        })                     layer.close(index);
                     //location.reload();

                    

                    }

                  });

        });

        //退订的

        $('.class-button').on('click',function(){
			//lkl修改
            //var uid = $(this).next('input:hidden').val();

            //var cid = $(this).prev('input[name=cid]').val();
			var uid = $('#auid').val();
			var cid = $('#acid').val();
			
			
            var order = "{$Think.get.order}";

            layer.open({

                    content: '您确定要退订吗？'

                    ,btn: ['确定', '取消']

                    ,yes: function(index){

                      $.ajax({

                            url: "{:U('CourseRecord/cancel')}",

                            type: 'POST',

                            dataType: 'json',

                            data: {uid: uid,cid:cid,order:order,},

                            success:function(data){

                            layer.msg('申请退订成功！48小时自动退订', {

                                  time: 2000 //20s后自动关闭

                                },function(){

                                    location.reload();

                                });

                            }

                        })

                     layer.close(index);

                    }

                  });

        });

         //确认课程

        $('.class-btn-tow').on('click',function(){

            // var chk_value =[];

            // $('input[name="check"]:checked').each(function(){

            //     chk_value.push($(this).val());

            // });

            // $('.NoAc').next('input').each(function(){

            //     chk_value.push($(this).val());

            // });

            // if(chk_value == ""){

            //     layer.msg("没有要确认的课程！");

            //     return false;

            // }

            var order = {$_GET['order']};

            $.ajax({

                url: "{:U('mystuAjaxStu')}",

                type: 'POST',

                dataType: 'json',

                data: {order: order},

                success:function(data){

                layer.alert(data, function(index){

                        layer.close(index);

                        location.reload();

                    });

                }

            })

        });

        //点击评论跳转页面

        $('.assess').on('click',function(){

            var flag;

            var cid = '{$Think.get.cid}';

            var order = "{$_GET['order']}";

            $.ajax({

                async:false,

                url: '__MODULE__/CourseEva/checkCommon',

                type: 'POST',

                data: {cid: cid,order: order},

                success:function(msg){

                    flag = msg;

                }

            });

            var order = $(this).prev('input[name=order]').val();

            if (flag) {

                //未评论，跳转发布评论

                var id = $(this).next('input:hidden').val();

                window.location.href='__MODULE__/CourseEva/assess/id/'+id+'/order/'+order;

            } else {

                //已评论，跳转评论页面

                location.href='__MODULE__/Course/showAssess/uid/{$data.cid}/order/'+ order+'/cid/'+cid;

            }

        

         });

    </script>

    </block>